<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="mycss/redBtn.css" />
</head> 
<?php require("check_login.php"); ?>
<?php require("user_settings.php"); ?>

<style>
label, textarea{
  display:inline-block;
  vertical-align:middle;

}
form {
	margin: 1em 0 0 1.5em;
}
label {
	float: left;
	width: 100px;
	margin-left: 1em;
}
p {
	clear: both;
}
fieldset {
margin: 1.5em 0em 0em 1.5em;
padding: 0;
border: 1px solid #CCC;
width: 600px;
}
legend {
margin-left: 1em;
color: #009;
font-weight: bold;
}
</style>
<style> 
.myinput{
	border: #C0C0C0 1px solid;
	border-radius: 5px;
	/** remember to change image path **/
	background: url(none) no-repeat #ffffff;
	font-family: tahoma, helvetica, sans-serif;
	font-style: normal;
	font-size: 14px;
	color: #454743;
}

 </style> 

<fieldset>
	<legend> 廠商資料 </legend>
	<label for='sName'> 名稱 </label> <input type="text" id='sName' class='myinput'><BR> 
	<label for='sCity'>分類 </label><input type="text" id='sCity' class='myinput'><BR>
	<label for='sAddr'>地址 </label><input type="text" id='sAddr' class='myinput'><BR> 
	<label for='sPhone'>電話</label> <input type="text" id='sPhone' class='myinput'><BR> 
	<label for='sOffer'>優惠 </label><textarea id='sOffer' rows=5 cols=50 class='myinput'></textarea><BR>
</fieldset>
<form action="save_offer.php" method="POST">
	<input type="button" value="新增" class='redBtn' onclick='addrow();'>
	<input type="button" value="刪除" class='redBtn' onclick='delrow();'>
	<input type="button" value="修改" class='redBtn' onclick='modrow();'>
<input type="hidden" name="content" id="content">
<input type="submit" value="儲存" class='redBtn' onclick='saveTable()'>
</form>
<BR>
<table id="mytable" border=1 style="margin: 0 0 0 1.5em">
	<col style="width:10%">
	<col style="width:5%">
	<col style="width:25%">
	<col style="width:10%">
	<col style="width:40%">
	<tr align=center>
		<td> 廠商名稱</td> 
		<td> 分類 </td>
		<td> 地址 </td>
		<td> 電話 </td>
		<td> 優惠 </td>
	</tr>
</table>


<script lang=javascript>
var selectedColor='#BCD4EC';
var selectedColorInner="rgb(188, 212, 236)";
var changed = false;
function escapeHtmlRev(text) {
  return text
      .replace(/&amp;/g ,"&")
//      .replace(/&lt;/g  ,"<")
//      .replace(/&gt;/g  ,">")
      .replace(/&quot;/g,"\"")
      .replace(/&#039;/g,"'");
}
function escapeHtml(text) {
  return text
      .replace(/&/g, "&amp;")
//      .replace(/</g, "&lt;")
//      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}
<?php
	#echo "var json_content_text = '" .file_get_contents("users/".$_SESSION['id']."/offer.txt")."';";
	echo "var json_content_text = '" .getOffer($_SESSION['id'])."';";
	#$offer = getOffer($_SESSION['id']);
	#echo  "var json_content_text = '" .str_replace("\"","\\\"",$offer)."\";";
	#echo "var json_content_text = \"". str_replace("\"","\\\"",$offer)."\";";
?>
	json_content_text = json_content_text;
	</script>
	
	<script>
	function tableToJson(table) {
		var data = []; // first row needs to be headers var headers = [];
		var headers = [];
		for (var i=0; i<table.rows[0].cells.length; i++) {
			headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
		}
		// go through cells
		for (var i=1; i<table.rows.length; i++) {
			var tableRow = table.rows[i]; var rowData = {};
			for (var j=0; j<tableRow.cells.length; j++) {
				rowData[ headers[j] ] = escapeHtml(tableRow.cells[j].innerHTML);
			} data.push(rowData);
		}
		return data; 
	}

function saveTable() {
	var table = document.getElementById("mytable");
	var content= document.getElementById("content");
	
	changed=false;
	content.value=JSON.stringify(tableToJson(table));
	alert(content.value);
}
function forclick() {
	var table = document.getElementById("mytable");
              var Name = document.getElementById("sName");
              var City= document.getElementById("sCity");
              var Addr= document.getElementById("sAddr");
              var Phone = document.getElementById("sPhone");
              var Offer= document.getElementById("sOffer");
              Name.value=this.cells[0].innerHTML;
              City.value=this.cells[1].innerHTML;
              Addr.value=this.cells[2].innerHTML;
              Phone.value=this.cells[3].innerHTML;
              Offer.value=this.cells[4].innerHTML.replace(/<BR>/gi,"\n");
              for(var i=1;i<table.rows.length;i++) {
              	unhighlight();
              	this.origColor=this.style.backgroundColor;
              	this.style.backgroundColor=selectedColor;
              	
              }
              
	}
	function loadTable() {
		var obj = JSON.parse(json_content_text);
		var num = 1;
		for(i=0;i<obj.length;i++) {
		var Tr = document.getElementById("mytable").insertRow(num);
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=escapeHtmlRev(obj[i]["廠商名稱"]);
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=escapeHtmlRev(obj[i]["分類"]);
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=escapeHtmlRev(obj[i]["地址"]);
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=escapeHtmlRev(obj[i]["電話"]);
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=escapeHtmlRev(obj[i]["優惠"]);
		unhighlight();
		Tr.onclick = (function() {
			return forclick;
				})(num+1);
		
		num++;
		}
		}
	function modrow() {
		var table = document.getElementById("mytable");//.rows.length;
		for(i=0;i<table.rows.length;i++) {
			if(table.rows[i].style.backgroundColor==selectedColorInner) {
              var Name = document.getElementById("sName");
              var City= document.getElementById("sCity");
              var Addr= document.getElementById("sAddr");
              var Phone = document.getElementById("sPhone");
              var Offer= document.getElementById("sOffer");
				table.rows[i].cells[0].innerHTML = Name.value;
				table.rows[i].cells[1].innerHTML = City.value;
				table.rows[i].cells[2].innerHTML = Addr.value;
				table.rows[i].cells[3].innerHTML = Phone.value;
				table.rows[i].cells[4].innerHTML = Offer.value.replace(/\n/g,"<br>");
				break;
			}	
		}
		changed=true;
	}
	function delrow() {
		var table = document.getElementById("mytable");//.rows.length;
		for(i=0;i<table.rows.length;i++) {
			if(table.rows[i].style.backgroundColor=="rgb(188, 212, 236)") {
				document.getElementById("mytable").deleteRow(i);
				break;
			}	
		}
		changed=true;
	}
	function addrow() {
		var num = 1;//document.getElementById("mytable").rows.length;
		var Tr = document.getElementById("mytable").insertRow(num);
		if((document.getElementById("sName").value.length+
			document.getElementById("sCity").value.length+
			document.getElementById("sAddr").value.length+
			document.getElementById("sPhone").value.length+
			document.getElementById("sOffer").value.length) == 0)
			return;
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=document.getElementById("sName").value;
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=document.getElementById("sCity").value;
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=document.getElementById("sAddr").value;
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=document.getElementById("sPhone").value;
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=document.getElementById("sOffer").value.replace(/\n/g,"<br>");
		unhighlight();
		Tr.onclick = (function() {
			return forclick;
				})(num+1);
		changed=true;
	}
		function example4() {
    var table = document.getElementById("mytable");
    var rows = table.rows; // or table.getElementsByTagName("tr");
    for (var i = 1; i < rows.length; i++) {
        rows[i].onclick = (function() { // closure
            var cnt = i; // save the counter to use in the function
			return forclick;
        })(i);
    }
	loadTable();
}
function unhighlight() {
	 var table = document.getElementById('mytable');
 for (var i=0;i < table.rows.length;i++){
   var row = table.rows[i];
   row.style.backgroundColor='white';
   row.hilite = false;
 }
}
window.onload = function() { example4(); }


window.onbeforeunload = function() { 
		if(changed == false)
			return ;
		else
			return "";
      //if(confirm('are you sure to exit?')) 
      //     return true; 
      //else 
      //     return false; 
};


		</script>
